import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, message, Empty, Button } from 'antd';
import { deleteProbeStrategy } from '@api/task';
import PortSettingModal from '../probe-strategy-modal';
import './index.less';

const prefixCls = 'port-manage-table';

const PortManageTable = props => {
  const [portManageModalVisible, setPortManageModalVisible] = useState(false);
  const [detail, setDetail] = useState({});
  const { pagination, data, getPortList, onTableChange, loading } = props;
  const deleteOperation = body => {
    deleteProbeStrategy(body)
      .then(() => {
        getPortList();
        message.success('删除成功');
      })
      .catch(() => {
        message.erroe('删除失败');
      });
  };
  const changeModalVisible = (visible, record) => {
    if (visible) {
      setDetail(record);
    } else {
      setDetail({});
    }
    setPortManageModalVisible(visible);
  };
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      width: '15%'
    },
    {
      title: '探测端口',
      dataIndex: 'detectionPortName',
      width: '10%',
      render: detectionPortName => {
        return detectionPortName ? detectionPortName : '自定义';
      }
    },
    {
      title: '仅端口探活',
      dataIndex: 'portDetectionOnly',
      width: '15%',
      render: portDetectionOnly => {
        return portDetectionOnly ? '是' : '否';
      }
    },
    {
      title: 'web指纹探测',
      dataIndex: 'fingerprintDetection',
      width: '10%',
      render: fingerprintDetection => {
        return fingerprintDetection ? '是' : '否';
      }
    },
    {
      title: '操作系统深度探测',
      dataIndex: 'depthDetect',
      width: '10%',
      render: depthDetect => {
        return depthDetect ? '是' : '否';
      }
    },
    {
      title: '协议类型',
      dataIndex: 'protocolType',
      width: '10%',
      render: protocolType => {
        return protocolType.join('、');
      }
    },
    {
      title: '类型',
      dataIndex: 'isDefault',
      width: '8%',
      render: isDefault => {
        return isDefault ? '系统默认' : '自定义';
      }
    },
    {
      title: '操作',
      dataIndex: 'operations',
      width: '15%',
      render: (operations, record) => (
        <div>
          <Button
            type="link"
            disabled={record.isDefault}
            onClick={() => changeModalVisible(true, record)}
          >
            编辑
          </Button>
          <Popconfirm
            placement="bottomRight"
            disabled={record.isDefault}
            title={'确定删除吗'}
            onConfirm={() => deleteOperation({ detectionStrategyId: record._id })}
            okText="确定"
            cancelText="取消"
          >
            <Button
              type="link"
              disabled={record.isDefault}
              style={{ marginLeft: 5, color: '#F04038' }}
            >
              删除
            </Button>
          </Popconfirm>
        </div>
      )
    }
  ];

  return (
    <div className={`${prefixCls}`}>
      <Table
        columns={columns}
        pagination={pagination}
        dataSource={data}
        onChange={onTableChange}
        loading={{ spinning: loading, tip: '加载中' }}
        locale={{
          emptyText: (
            <Empty description={loading ? ' ' : '暂无数据'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )
        }}
      />
      <PortSettingModal
        modalVisible={portManageModalVisible}
        changeModalVisible={changeModalVisible}
        getPortList={getPortList}
        detail={detail}
      />
    </div>
  );
};

PortManageTable.propTypes = {
  onTableChange: PropTypes.function,
  changeModalVisible: PropTypes.function,
  total: PropTypes.number,
  data: PropTypes.array,
  pagination: PropTypes.object,
  getPortList: PropTypes.function,
  loading: PropTypes.boolean
};

export default PortManageTable;
